<template>
  <div>
    <div v-show="showFlg" class="menuAuth">
      <header class="d-flex justify-content-between">
        <div class="left d-flex">
          <t-input v-model="formItem.menuName" icon="magnify" placeholder="菜单名称/菜单ID" clearable>
          </t-input>
          <t-button icon="skip-backward" @click="addSearch"></t-button>
        </div>
        <div class="right">
          <t-button type="primary" icon="plus-circle-outline" @click="add">新增菜单</t-button>
          <t-dropdown :visible="visible" trigger="custom">
            <t-button type="outline-secondary" icon="format-align-left" @click="showMenuList"></t-button>
            <t-dropdown-menu slot="list">
              <t-checkbox-group v-model="selectedMenu">
                <div v-for="(item,index) in menuList" :key="index">
                  <t-checkbox :label="item"></t-checkbox>
                </div>
              </t-checkbox-group>
              <t-button type="primary" @click="menuConfirm">确定</t-button>
            </t-dropdown-menu>
          </t-dropdown>
        </div>
      </header>
      <div v-show="ifShow" class="search">
        <div class="d-flex condition">
          <div>
            <p>菜单地址</p>
            <t-input v-model="formItem.menuUrl" placeholder="请输入" clearable></t-input>
          </div>
          <!-- <div>
          <p>模块编号</p>
          <t-input placeholder="请输入" clearable></t-input>
        </div> -->
          <div>
            <p>状态</p>
            <t-select v-model="formItem.state" placeholder="请选择" clearable>
              <t-option v-for="(item, index) in stateList" :key="index" :value="item.value">
                {{ item.label }}
              </t-option>
            </t-select>
          </div>
        </div>
        <div class="button d-flex justify-content-end">
          <t-button @click="reset">重置</t-button>
          <t-button type="primary" style="margin-left:10px;">查询</t-button>
        </div>
      </div>
      <t-table :columns="columns" :data="data" :all-ellipsis="true" line style="margin-top:5px;">
      </t-table>
      <div class="page d-flex justify-content-between">
        <span>共{{ pagination.total }}条</span>
        <t-pager :total="pagination.total" :current.sync="pagination.currentPage" :page-size.sync="pagination.size" :sizer-range="pagination.sizes"
                 show-elevator show-sizer
                 @on-size-change="onSizeChange"
                 @on-change="onChange"></t-pager>
      </div>
    </div>
    <add-workflow-template :add-show-flg= "addShowFlg" @refresh="showaa"></add-workflow-template>

  </div>
</template>
<script>
import addWorkflowTemplate from './components/addAndEdit.vue'

import MenuOperation from './MenuOperation.vue'
import http from '../../http'
import services from '../../conf/services'
export default {
  components: {
    addWorkflowTemplate
  },
  data() {
    return {
      showFlg: true,
      addShowFlg: false,
      columns: [
        {
          title: '菜单ID'
        },
        {
          title: '菜单名称'
        },
        {
          title: '菜单地址'
        },
        {
          title: '菜单图标'
        },
        {
          title: '菜单排序'
        },
        {
          title: '模块编号'
        },
        {
          title: '状态'
        },
        {
          title: '操作',
          render: (h, params) => {
            return h(MenuOperation)
          }
        }
      ],
      data: [],
      formItem: {
        menuName: '',
        menuUrl: '',
        state: ''
      },
      stateList: [
        {
          value: 0,
          label: '禁用'
        },
        {
          value: 1,
          label: '启用'
        }
      ],
      ifShow: false,
      visible: false,
      selectedMenu: ['菜单ID', '菜单名称', '菜单地址', '菜单图标', '菜单排序', '模块编号', '状态'],
      pagination: {
        currentPage: 1,
        sizes: [10, 15, 20],
        size: 10,
        total: 0
      },
      menuList: ['菜单ID', '菜单名称', '菜单地址', '菜单图标', '菜单排序', '模块编号', '状态']
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    showaa() {
      console.log(111111)
      this.showFlg = true
    },
    add() {
      this.showFlg = !this.showFlg
      this.addShowFlg = !this.addShowFlg
    },
    async getMenuList() {
      let res = await http.$http.post(services.QUERY_MENU_LIST, {
        bo: 'user',
        bc: 'USER_FUNCTION',
        condition: JSON.stringify({
        }),
        order_by: JSON.stringify([{ ORDER_TYPE: 'DESC', NAME: 'ID' }]), // 这个是排序
        begin: (this.pagination.currentPage - 1) * this.pagination.size,
        row: this.pagination.size
      })
      console.log(res)
    },
    // 显示新增搜索条件
    addSearch() {
      this.ifShow = !this.ifShow
    },
    // 显示菜单列表
    showMenuList() {
      this.visible = true
    },
    // 自定义表单列表
    menuConfirm() {
      let difference = this.menuList.concat(this.selectedMenu).filter(v => this.menuList.includes(v) && !this.selectedMenu.includes(v))
      for (const v of difference) {
        for (const v1 of this.columns) {
          if (v === v1.title) {
            const index = this.columns.indexOf(v1)
            this.columns.splice(index, 1)
          }
        }
      }
      this.visible = false
    },
    // 重置表单
    reset() {
      this.formItem = {
        menuName: '',
        menuUrl: '',
        state: ''
      }
    },
    onSizeChange(val) {
      this.pagination.size = val
    },
    onChange(val) {
      this.pagination.currentPage = val
    }
  }
}
</script>
<style lang="scss" scoped>
.menuAuth {
  padding: 10px;
  header {
    .left {
      input {
        width: 300px;
      }
      .btn {
        margin-left: 10px;
      }
    }
  }
  .search {
    background: #F8F9FA;
    padding: 10px 30px;
    margin: 5px 0;
    .condition {
      > div {
        margin: 0 10px;
        p {
          margin: 0 0 3px 0;
        }
        input,.select {
          width: 245px;
        }
     }
    }
    .button {
      margin-top: 10px;
      .btn {
        width: 96px;
      }
    }
  }
  .page {
    margin-top: 20px;
  }
}
</style>

